<app>
    <div class="{ loading ? 'loading': 'hidden' }">
        <p class="text">Loading...</p>
    </div>
    <div class="error { error ? '' : 'hidden' }">
        <p class="text">{ error }</p>
    </div>
    <div class="ppt hidden" ref="remark"></div>
    <!--<preview></preview>-->
    
    <script>
        this.loading = true
        this.error = false

        function setupPPT(source){
            var slideshow = remark.create({
                //container: self.refs.remark,
                source: source,
                navigation:{
                    scroll: false
                }
                ,highlightStyle: 'monokai'
            })

            console.log('PPT initialized!')
        }

        var self = this
        this.on('mount', function(){
            PPTStore.fetch(function(err, data){
                if(err){
                    self.error = 'Something is wrong!'
                    self.loading = false
                    self.update() //remember to call update
                    return
                }

                self.loading = false
                self.error = null
                self.update()

                setupPPT(data)
            })
        })
    </script>
</app>